<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <!-- 前面内容 -->
        <template v-slot:before>有 X 条考勤审批尚未处理</template>
        <template v-slot:after>
          <el-button size="mini" type="danger" @click="$router.push('/import?type=attendance')">导入</el-button>
          <el-button size="mini" type="warning">提醒</el-button>
          <el-button size="mini" type="primary">设置</el-button>
          <el-button size="mini" type="default">历史归档</el-button>
          <el-button size="mini" type="primary">{{ currentMonth + 1 }}月份报表</el-button>
        </template>
      </page-tools>
      <!-- 多选框和单选框部分 -->
      <el-card class="hr-block">
        <el-form ref="formData" :model="formData" label-width="120px" class="formInfo">
          <el-form-item label="部门:">
            <el-checkbox-group v-model="formData.deptName" @change="checkboxChange">
              <el-checkbox
                v-for="item in departments"
                :key="item.id"
                :label="item.name"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="考勤状态：">
            <el-radio-group v-model="formData.radioId">
              <el-radio
                v-for="item in attenList"
                :key="item.id"
                :label="item.id"
                :value="item.des"
              >
                {{ item.des }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="hr-block">
        <el-table
          :data="attenPage"
          border
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="80"
          >
            <template v-slot="obj">
              {{ (currentPage - 1) * pageSize + obj.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="姓名"
            width="80"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
            width="100"
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            width="120"
          />
          <el-table-column
            prop="mobile"
            label="手机"
            width="140"
          />
          <el-table-column
            v-for="(item, index) in dateList"
            :key="item"
            prop="item"
            :label="item"
          >
            <template v-slot="{ row }">
              {{ row.attendanceRecord[index].adtStatu | formatAttendance(formData.radioId) }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getAttendancesListMock } from '@/api/attendances'
import { getDepartments } from '@/api/departments'
import AttendanceEnum from '@/api/constant/attendance'

export default {
  filters: {
    formatAttendance(val, id) {
      const obj = AttendanceEnum.holidayType.find(item => {
        item.id = item.id - 0
        if (id === 0) {
          return item.id === val
        } else {
          return val === id && item.id === val
        }
      })
      return obj ? obj.value : ''
    }
  },
  data() {
    return {
      // 用于显示日期的数组
      dateList: [],
      // 多选前的旧数据
      oldArr: [],
      // 当前页面
      currentPage: 1,
      // 每一页显示的数据
      attenPage: [],
      // 全部数据条数
      total: 0,
      // 每页显示的数据条数
      pageSize: 6,
      // 部门列表
      departments: [],
      // 部门多选框和考勤状态单选框的表单数据
      formData: {
        // 被选中的部门id
        deptName: [],
        // 被选中的考勤状态的id
        radioId: 0
      },
      // 获取回来的考勤列表
      attenDetail: [],
      // 考勤状态列表
      attenList: [
        {
          id: 1,
          des: '正常'
        },
        {
          id: 2,
          des: '旷工'
        },
        {
          id: 3,
          des: '事假'
        },
        {
          id: 4,
          des: '调休'
        },
        {
          id: 5,
          des: '迟到'
        },
        {
          id: 6,
          des: '早退'
        }
      ]
    }
  },
  computed: {
    // dateList() {
    //   return this.oldArr[0] && this.oldArr[0].attendanceRecord
    // },
    currentMonth() {
      const day = new Date()
      return day.getMonth()
    }
  },
  created() {
    this.getAttendancesListMock()
    this.getDepartments()
  },
  methods: {
    // 多选框选项改变时触发
    checkboxChange() {
      this.attenDetail = [...this.oldArr]
      if (this.formData.deptName.length === 0) {
        this.total = this.attenDetail.length
        this.handleCurrentChange()
        return
      }
      const arr = []
      const chooseDepts = []
      this.attenDetail.forEach(item => {
        // 通过some判断attenDetail的数据中的部门名是否存在与多选框选中的部门名数组deptName的数据相同
        const isChosen = this.formData.deptName.some(item1 => {
          return item.departmentName === item1
        })
        // 当两者的部门名相同时，说明attenDetail中存在选中的部门的考勤数据
        // 将数据放到一个临时存放数据的数组arr中
        // arr中的数据后面要用来覆盖掉attenDetail中的数据
        if (isChosen) {
          arr.push(item)
        }
      })
      // 遍历筛选后的数据数组arr，将部门名存入到chooseDepts中
      arr.forEach(item => {
        // 如果chooseDepts中没有该部门名，就将这个部门名放入chooseDepts中
        if (chooseDepts.findIndex(item1 => item1 === item.departmentName) === -1) {
          chooseDepts.push(item.departmentName)
        }
      })
      // console.log(chooseDepts)
      // console.log(this.formData.deptName)
      // 当chooseDepts的长度与多选框选中的部门名数组deptName长度不一致时，说明这次选中的部门中没有考勤数据
      // 没有考勤数据，就显示提示，并直接返回
      if (chooseDepts.length !== this.formData.deptName.length) {
        this.$message.warning('没有该部门的员工考勤状况')
        // 当不存在该部门的员工考勤数据时，将多选框选中的选项从数组中移除，形成不让选择的效果
        this.formData.deptName.pop()
        return
      }
      // console.log(arr)
      // 将arr中的数据又赋值回给attenDetail，覆盖掉attenDetail原本的数据
      // 因为渲染页面数据本质上使用的是attenDetail的数据
      this.attenDetail = arr
      // 修改总数据数量
      this.total = this.attenDetail.length
      // 调用改变页码方法
      this.handleCurrentChange()
    },
    // 处理日期格式
    formatDay(arr) {
      arr.forEach(item => {
        item.day = item.day + ''
        item.day = item.day.slice(4)
        item.day = item.day.slice(0, item.day.length - 2) + '/' + item.day.slice(-2)
      })
    },
    // 切换页码时触发
    handleCurrentChange() {
      this.attenPage = this.attenDetail.slice(this.currentPage * this.pageSize - this.pageSize, this.currentPage * this.pageSize)
      // console.log(this.attenPage)
    },
    // 获取模拟的考勤数据
    async getAttendancesListMock() {
      const res = await getAttendancesListMock()
      console.log('模拟的考勤列表', res)
      this.attenDetail = res
      this.formatDay(this.attenDetail[0].attendanceRecord)
      this.total = this.attenDetail.length
      this.handleCurrentChange()
      this.oldArr = JSON.parse(JSON.stringify(this.attenDetail))
      this.attenDetail[0].attendanceRecord.forEach(item => {
        this.dateList.push(item.day)
      })
    },
    // 获取部门数据
    async getDepartments() {
      const { depts } = await getDepartments()
      this.departments = depts
      console.log('部门列表', this.departments)
    }
  }
}
</script>

<style lang="scss" scoped>
  .tableInfo {
    line-height: 36px;
    border: solid 1px #ebeef5;
    border-right: 0 none;
    border-bottom: 0 none;
    tr {
      th {
        height: 50px;
        text-align: center;
        border-right: solid 1px #ebeef5;
        border-bottom: solid 1px #ebeef5;
        border-bottom: 2px solid #e8e8e8;
        background: #fafafa;
        min-width:  100px;
      }
      td {
        height: 36px;
        text-align: center;
        border-right: solid 1px #ebeef5;
        border-bottom: solid 1px #ebeef5;
      }
    }
  }

.attenInfo {
  p {
    &.check {
      padding: 20px 0 0;
    }
    .el-radio {
        display: inline-block;
        width: 60px;
        padding: 5px 0;

    }
  }
}
</style>
